<template>
	<view>
		<!-- <map
			ref="mapComponent"
			id="map"
			class="map"
			:latitude="latitude"
			:longitude="longitude"
			:show-location="true"
			:markers="markers"
		></map> -->
		
		<map
			ref="mapComponent"
			id="map"
			class="map"
		></map>
		
		<view class="pos-f bg-white shadow-type-1 h-px-50" style="left: 0; right: 0; top: 44px;">
			<view class="flex align-center mar-x-15" style="margin-top: 7px;">
				<view class="flex-4 mar-r-10">
					<u-input v-model="address" placeholder="请输入地址关键词查询" clearable></u-input>
				</view>
				
				<view class="flex-1">
					<u-button type="primary" customStyle="height: 34px;">搜索</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Utils from '@/utils/utils'
	import Settings from '@/utils/settings'
	
	import { getUserLocation } from '@/apis/common'
	
	export default {
		data() {
			return {
				// 地址
				address: '',
				
				// 当前用户位置坐标
				latitude: '',
				longitude: '',
				
				// 地图实例上下文
				mapContext: null,
				
				// 标记点
				markers: []
			}
		},
		
		mounted() {
			// 刚进入页面时需要用户授权定位，并且获取当前坐标系
			// this.getLocation()
		},
		
		methods: {
			// 获取当前位置（腾讯服务）
			async getLocation() {
				let systemInfo = await uni.getSystemInfo()
				let params = {
					key: Settings.TX_KEY,
					device_id: systemInfo.deviceId,
				}
				
				getUserLocation(params).then(res => {
					Utils.popUpMsg('none', `腾讯地图定位成功！`, 500)
					let result = res.result
					this.longitude = result.location.lng // 设置当前用户位置 - 经度
					this.latitude = result.location.lat // 设置当前用户位置 -纬度
					this.markers.push({
						id: 0,
						title: "",
						latitude: result.location.lat,
						longitude: result.location.lng,
						width: 30,
						height: 30,
						iconPath: '/static/images/location.png'
					})
				}).catch(err => {
					// Utils.popUpMsg('none', `定位获取失败，部分功能会受限！`, 1500)
					Utils.popUpMsg('none', `腾讯地图定位请求报错！`, 5000)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.map {
		width: 100%;
		height: calc(100vh - 44px);
	}
</style>
